<template>
  <el-card class="article-card">
    <div v-for="item in menus" :key="item">
      <ul>
        <li>
          <!-- 左边图片部分 -->
          <div class="article-img">
            <router-link :to="'/home/newsinfo/' + item.id"
              ><img :src="verifyCode" style="height: 120px; width: 100px"
            /></router-link>
          </div>
          <!-- 右边标题和简介 -->
          <div class="article-mid">
            <h2>
              <a href="">文章标题</a>
            </h2>
            <br />
            <p class="intro">
              浩瀚的宇宙中，一片星系的生灭，也不过是刹那的斑驳流光。
              仰望星空，总有种结局已注定的伤感，千百年后你我在哪里？
              家国，文明火光，地球，都不过是深空中的一粒尘埃。
              星空一瞬，人间千年。虫鸣一世不过秋，你我一样在争渡。
              深空尽头到底有什么？
            </p>
            <div class="display-function">
              <el-tag size="medium" type="info">点赞数量</el-tag>
              <el-tag size="medium" type="info">评论数量</el-tag>
              <el-tag size="medium" type="info">阅读数量</el-tag>
              <el-tag size="medium" type="info">发布日期</el-tag>
            </div>
          </div>
        </li>
      </ul>
      <hr />
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      menus: [1, 2, 3],
      verifyCode: require("../img/125855Qm4nr.jpg"),
    };
  },
  methods: {},
  computed: {},
};
</script>

<style>
.display-function {
  color: #666;
}

/* 点赞评论数量标签 */
.el-tag.el-tag--info {
  margin-left: 5px;
}
/* 首页标题靠左 */
h2 {
  display: flex;
  justify-content: flex-start;
}
</style>